<template>
   <div class="analyze">
       <el-header>
        <div class="header">
          <span class="title" @click="toUrl">< 返回首页</span>
        </div>
      </el-header>
      <div class="content">
          <div class="left">
              <div class="result">
                  <div>你的分数</div>
                <div>{{result}}/100</div>
              </div>
              <div class="title">单项选择题</div>
            <div class="topic">
                <div class="item" :class="item.name==ci?'check':''" v-for="item in stopic" @click="ci=item.name">
                <span  class="font" :class="ana[Number(item.name)-1].class.indexOf('r')>-1?'c':''">
                    {{item.name}}
                </span>
                </div>
            </div>
            <div class="title">多项选择题</div>
            <div class="topic">
                <div class="item" :class="item2.name==ci?'check':''" v-for="item2 in dtopic" @click="ci=item2.name">
                <span  class="font" :class="ana[Number(item2.name)-1].class.indexOf('r')>-1?'c':''">
                    {{item2.name}}
                </span>
                </div>
            </div>
          </div>
          <div class="right">
              <div class="title">
                  {{ana[ci-1].title}}
              </div>
              <div class="item" :class="ana[ci-1].class[0]">
                  <div class="cbox">A</div>
                  {{ana[ci-1].A}}
              </div>
              <div class="item" :class="ana[ci-1].class[1]">
                  <div class="cbox">B</div>
                  {{ana[ci-1].B}}
              </div>
              <div class="item" :class="ana[ci-1].class[2]">
                  <div class="cbox">C</div>
                  {{ana[ci-1].C}}
              </div>
              <div class="item" :class="ana[ci-1].class[3]">
                  <div class="cbox">D</div>
                  {{ana[ci-1].D}}
              </div>
              <div class="my">
                  <div class="title">我的作答</div>
                  <div class="ans">正确答案：{{ana[ci-1].answer}}</div>
                  <div class="ans" v-if="ana[ci-1].reply.length">您的回答：{{ana[ci-1].reply}}</div>
              </div>
          </div>
      </div>
   </div>
</template>
<script>
export default {
    data(){
        let arr =[]
        let list =[]
        for (let key=1;key<21;key++) {
        arr.push({
            id:key,
            name:key,
            check:false
            })
        list.push('')
        }
        let arr2 =[]
        for (let key=21;key<31;key++) {
        arr2.push({
            id:key,
            name:key,
            check:false
            })
            list.push([])
        }
        return{
            stopic:arr,       //左边选项
            dtopic:arr2,      //左边选项
            ci:1,
            ana:[],
            result:0
        }
    },
    mounted(){
        let arr = this.$gl('analyze')
        let arr2 =['A','B','C','D'] 
        let count = 0
        arr.forEach(item=>{
            let cs = ['','','','']
            // console.log(typeof(item.answer))
            if(typeof(item.answer) == 'string'){
                cs[arr2.indexOf(item.reply)] = 'r'
                cs[arr2.indexOf(item.answer)] = 'b'
                if(cs.indexOf('r') == -1 && item.reply){count += 2.5}
            }else{
                if(item.reply.length){
                    item.reply.map(item2=>{
                        cs[arr2.indexOf(item2)] = 'r'
                    })
                }
                item.answer.map(item2=>{
                    cs[arr2.indexOf(item2)] = 'b'
                })
                if(cs.indexOf('r') == -1&& item.reply.length){count += 5}
            }
            item.class = cs
        })
        this.result = count
        this.ana = arr
        console.log(arr)
        this.upScore()
    },
    methods:{
        upScore(){
            let paper = this.$gl('paper')
            let user =this.$gl('nowUser')
            console.log(paper);
            if(paper.paper_name){
                let form = {
                    paper_name:paper.paper_name,
                    score:this.result,
                    user_id:user.userId,
                    user_name:user.userName

                }
                this.$http.upScore(form).then(res=>{
                    console.log(res);
                })
            }
        },
        toUrl(item){
            this.$router.push({
                name:'home'
            })
        }
    }
}
</script>
<style lang="less" scoped>
.header{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  // box-sizing: border-box;
  background: #0091FF;
  .title{
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 28px;
    cursor: pointer;
  }
  .end{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    img{
      width: 34px;
      height: 34px;
      margin-right: 5px;
    }
    .username{
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #F8F7FB;
      line-height: 22px;
    }
  }
}
/deep/ .el-header,.el-aside{
  padding: 0;
  background-color: #fff;
}
.content{
    width: 100%;
    display: flex;
    justify-content: center;
    .left{
        height: 610px;
        border-radius: 5px;
        overflow-y: auto;
        margin-top: 6px;
        width: 302px;
        // border-right: 1px #99DCFA solid;;
        background-color: #fff;
        margin-right: 10px;
        .title{
          font-size: 14px;
          padding-left: 10px;
          line-height: 30px;
          font-size: 14px;
        color: #666F83;
          height: 30px;
        }
        .topic{
          width: 100%;
          min-height: 32px;
          padding: 4px;
          background-color: #fff;
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 10px;
          padding-left: 20px;
          .item{
                margin-right: 18px;
                width: 36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                border-radius: 50%;
                font-size: 18px;
                margin-top: 24px;
                cursor: pointer;
                // background-color: #e9f5ff;
                background-color: #fff;
                border: 1px dotted #ebebeb;
                color: #9DA3B2;
            
                // background-color: #fff;
                .font{
                position: relative;
                font-size: 14px;
                font-family: 微软雅黑, 宋体;
                text-decoration: underline;
                }
                .c{
                    color: #FB5200;
                }
            }
            .check{
                background-color: #e9f5ff !important;
                color: #268CFF !important;
            }
          }
        
        .tip{
          color: #FF4642;
          font-size: 18px;
          line-height: 24px;
          padding-left: 10px;
        }
    }
    .right{
        margin-top: 6px;
        position: relative;
        width: 800px;
        height: 610px;
        background-color: #fff;
        border-radius: 5px;
        margin-bottom: 20px;
        padding: 30px;
        // display: flex;
        // align-items: center;
        // box-sizing: border-box;
        .title{
            font-size: 16px;
            color: #41485D;
            line-height: 29px;
        }
        .item{
            display: flex;
            align-items: center;
            padding-left: 14px;
            border: 1px solid #EBEBEB;
            height: 50px;
            width: 100%;
            margin-bottom: 14px;
            .cbox{
                font-size: 16px;
                color: #111A34;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                border-radius: 4px;
                background: #fff;
                border: 1px solid #7e6a6a;
                margin-right: 5px;
            }
        }
        .b{
            background: #E9F5FF;
        }
        .r{
            background: #FFEEE5;
            .cbox{
                background: #FB5200;
                color: #fff;
                border: none;
            }
        }
        .my{
            background-color: #E9F5FF;
            width: calc(100% + 60px);
            margin-left: -30px;
            padding: 30px;
            min-height: 60px;
            .title{
                font-size: 18px;
                color: #111A34;
                font-weight: bold;
            }
            .ans{
                font-size: 16px;
                padding-top: 10px;
                color: #268CFF;
                font-weight: bold;
            }
        }
    }
}
.result{
    display: flex;
    color: #268CFF;
    justify-content: space-between;
    // margin-bottom: 10px;
    padding: 10px;
}
</style>